<template>
  <ly-panel class="prop-manage" v-show="propsPanel.status">
    <div slot="header" class="set-panel">
      <span class="title">设置面板</span>
      <i class="f-fr el-icon-close u-btn-close" @click="$store.commit('CLOSE_PROPS_PANEL')"></i>
    </div>
    <div class="mn">
      <keep-alive>
        <component 
          :is="propsPanel.name"
          :id="propsPanel.id">
        </component>
      </keep-alive>
    </div>
  </ly-panel>
</template>

<script>
import CompConfigs from '@/components/blocks/config.js'
import PagePropConfig from '@/containers/page-prop-config.vue'

export default {
  name: 'PropManage',
  computed: {
    propsPanel () {
      return this.$store.getters.propsPanel
    },
    curComp () {
      return this.$store.getters.curComp
    }
  },
  components: {
    ...CompConfigs,
    lyPanel: () => import('@/layouts/ly-panel'),
    PagePropConfig
  }
}
</script>
<style lang="scss">
	@import "../assets/styles/variable.scss";
	
  .prop-manage {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 260px;
    max-height: 80vh;
    overflow-y: auto;
		border:1px solid $common_border_color;
		box-shadow:0 0 8px #dbdee6;
		background:#f9fafd;
		
    .u-btn-close {
      color: #909399;
      cursor: pointer;
			font-size:16px;
			margin:17px 14px 0 0;
      &:hover {
        color: #ccc;
      }
    }
		.el-tabs__nav{
				width:100%;
				.el-tabs__item{
					width:50%;
					text-align: center;
					padding:0;
				}
			}
		.el-tabs__item.is-active {
		    color: #5c7aff;
		}
		.el-tabs__active-bar{
			width:129px!important;
			height: 1px;
			background-color: #5c7aff;
		}
		.el-tabs__header {
		    margin: 0;
		}
		.el-collapse-item__header{
			border:none;
			background:$main_color!important;
			padding-left:14px;
			font-size:14px;
			height:40px;
			&:hover {
			  background: #849bfe!important;
				color:#fff;
			}
		}
		.el-collapse-item__wrap{
			background:#f9fafd;
			padding:15px;
		}
		.el-tabs__header{
			background:#f9fafd;
		}
	
		.set-panel{
			background: #fff!important;
			height:50px;
			.title {
				float:left;
				margin-left:14px;
			}
		}
		.el-collapse-item__content{
			padding-bottom:0!important;
		}
  }

</style>
